<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>健身房管理系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/animate.min.css">
    <!-- 引入组件库 -->
    <style>
        .img {
            max-width: 100%;
            height: auto;
        }
        .blur {-webkit-filter: blur(4px);filter: blur(1px);}
        .indexf{
            position: relative;
            width: 100%;
            height: 600px;
            margin: auto;
        }
        .indexs{
            position: absolute;
            right: 35%;
            top: 35%;
        }
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 480px;
        }
    </style>
</head>
<body>
<div id="app" class="indexf" >
    <div style="position: absolute" class="animate__fadeInDown animate__animated">
        <img src="${pageContext.request.contextPath}/statics/img/img.png" class="img blur" alt="">
    </div>
    <div style="display: block" class="indexs animate__fadeInRight animate__animated">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>LOGIN</span>
            </div>
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="form.userName" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" placeholder="用户密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="类别" prop="type">
                    <el-select v-model="form.type" placeholder="选择用户类别">
                        <el-option label="管理员" value="2"></el-option>
                        <el-option label="会员" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

</div>
<script src="${pageContext.request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/vue-2.6.12.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/index.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/axios-0.20.0.js"></script>
<script>
    new Vue({
        el:"#app",
        data: {
            form: {
                userName: '张三',
                password:'111111',
                type:'1'
            },
            // 规则检验
            rules: {
                userName: [{required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 2, max: 5, message: '长度在 2 到 5个字符', trigger: 'blur'}],
                password: [{required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 6, message: '六位', trigger: 'blur'}],
                type: [{required: true, message: '请选择类型', trigger: 'blur'},],

            },
        },
        methods: {
            // 添加方法
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    // 如果检验通过 进行提交
                    if (valid) {
                        // 发出axios请求
                        axios.post("${pageContext.request.contextPath}/login", this.form).then(response => {
                            if (response.data.code === 1&& response.data.data==="1") {
                                console.log(response.data.data);
                                location.href= './system/jumpUserIndex';//页面跳转到主页面
                            }else if (response.data.code === 1&& response.data.data==="2"){
                                location.href= './system/jumpAdminIndex';//页面跳转到主页面
                            }
                            this.$message({
                                type: 'warning',
                                message: '无用户'
                            });
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    })
</script>
</body>
</html>
